<html>
    <head>
    </head>
    <body>
        <div class="layuimini-main">

            <div class="layui-form layuimini-form">
                <div class="layui-form-item">
                    <label class="layui-form-label required">封面</label>
                    <div class="weui-uploader__input-box" id="bookImageDiv">
                    </div>
                    <div class="layui-hide" id="uploadDemoView" style="float: left">
                        <img id="bookImage" src="" alt="上传成功后渲染" style="max-width: 100px;max-height: 100px">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">编号</label>
                    <div class="layui-input-block">
                        <input type="text" id="bookNo" lay-verify="required" lay-reqtext="编号不能为空" placeholder="请输入编号" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="bookName" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">出版社</label>
                    <div class="layui-input-block">
                        <input type="text" id="publish" lay-verify="required" lay-reqtext="出版社不能为空" placeholder="请输入出版社" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">数量</label>
                    <div class="layui-input-block">
                        <input type="number" id="qty" lay-verify="required" lay-reqtext="数量不能为空" placeholder="请输入数量" value="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="saveBookBtn" class="layui-btn layui-btn-normal">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .weui-uploader__input-box{
                float:left;
                position:relative;
                margin-right:7px;
                margin-bottom:7px;
                width:100px;
                height:100px;
                border:1px solid #D9D9D9;
            }
            .weui-uploader__input-box:before,
            .weui-uploader__input-box:after{
                content:" ";
                position:absolute;
                top:50%;
                left:50%;
                -webkit-transform:translate(-50%, -50%);
                transform:translate(-50%, -50%);
                background-color:#D9D9D9;
            }
            .weui-uploader__input-box:before{
                width:2px;
                height:39.5px;
            }
            .weui-uploader__input-box:after{
                width:39.5px;
                height:2px;
            }
            .weui-uploader__input-box:active{
                border-color:#999999;
            }
            .weui-uploader__input-box:active:before,
            .weui-uploader__input-box:active:after{
                background-color:#999999;
            }
        </style>
<!--        <script type="text/javascript" src="../../bms/js/book/add.js"></script>-->
        <script>
            layui.use(['form', 'upload'], function(){
                let form = layui.form, layer = layui.layer, $ = layui.$;
                form.render();
                // 当前弹出层，防止ID被覆盖
                let parentIndex = layer.index;
                let loadIndex;
                let upload = layui.upload;
                let uploadData = {};
                upload.render({
                    elem: '#bookImageDiv',
                    accept: 'images',
                    url: 'book/insertBook',
                    auto: false,
                    bindAction: "#saveBookBtn",
                    // contentType: 'application/x-www-form-urlencoded',
                    data: uploadData,
                    choose: function(obj){
                        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                        obj.preview(function(index, file, result){
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', result);
                        });
                    },
                    before: function(obj){
                        let bookNo = $("#bookNo").val();;
                        if(bookNo == undefined || bookNo.length <= 0){
                            layer.alert("请填写编号", {icon: 2, skin: 'layer-ext-moon'})
                            // layui 的bug，return false之后还是阻止不了上传，期待后续版本解决，这里已经改了源代码，upload.js
                            return false;
                        }
                        let bookName = $("#bookName").val();
                        if(bookName == undefined || bookName.length <= 0){
                            layer.alert("请填写名称", {icon: 2, skin: 'layer-ext-moon'})
                            return false;
                        }
                        let publish = $("#publish").val();
                        if(publish == undefined || publish.length <= 0){
                            layer.alert("请填写出版社", {icon: 2, skin: 'layer-ext-moon'})
                            return false;
                        }
                        let qty = $("#qty").val();
                        if(qty == undefined || qty.length <= 0 || qty == 0){
                            layer.alert("请填写数量", {icon: 2, skin: 'layer-ext-moon'})
                            return false;
                        }
                        uploadData.bookNo = bookNo;
                        uploadData.bookName = bookName;
                        uploadData.publish = publish;
                        uploadData.qty = qty;
                        let confirm = window.confirm("确定新增图书信息吗?");
                        if (confirm) {
                            loadIndex = layer.load(0, {shade: [0.3, '#8B8682']});
                            return true;
                        } else{
                            return false;
                        }
                    },
                    done: function (res, index, upload) {
                        console.log("upload done...");
                        layer.close(loadIndex);
                        console.log(res);
                        if(res.code == 0){
                            layer.alert(res.msg, {icon: 1, skin: 'layer-ext-moon'})
                            layer.close(parentIndex);
                            parent.layui.table.reload('bookTableId');
                        }else {
                            layer.alert(res.msg, {icon: 2, skin: 'layer-ext-moon'})
                        }
                    },
                    error: function (index, upload) {
                        layer.close(loadIndex);
                        layer.alert("新增图书失败，请联系管理员", {icon: 2, skin: 'layer-ext-moon'})
                    }
                });
            });
        </script>
    </body>
</html>
